<template>
  <div class="person">
    ???
  </div> 
</template>

<script lang="ts" setup name="Person">
  import { ref,defineExpose} from 'vue'
  import { type personInter,type persons } from '@/types'   //@是在src目录,引入必须加type

  // let person:personInter = {id:'12456',name:'wrl',age:19}  //定义一个符合personInter接口规范的对象
  
  // Array<personInter>泛型，定义一个数组，数组中的每一项符合personInter规范
  // let personList:Array<personInter> = [
  //   {id:'23456',name:'hjn',age:18},
  //   {id:'78944',name:'hnn',age:30},
  //   {id:'23345',name:'chy',age:40}
  // ]

  // 自定义类型规范
  let personList:persons = [
    {id:'23456',name:'hjn',age:18},
    {id:'78944',name:'hnn',age:30},
    {id:'23345',name:'chy',age:40}
  ]
 
</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>